<template>
  <div class="mod-config">
    <basic-container>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="门诊挂号" name="first">
          <el-divider content-position="left">顾客信息</el-divider>
          <el-form inline>
            <el-row style="background-color: #ecf5ff;padding: 5px 10px;">
              <el-form-item label="卡号">
                <el-input v-model="registerForm.cardNum" placehold="身份证/ID号/就诊卡"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="info" plain icon="el-icon-s-custom" @click="getPersonByCardNum">读取</el-button>
                <el-button type="primary" plain icon="el-icon-search" @click="searchPerson">查询</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="personAdd">建档</el-button>
              </el-form-item>
            </el-row>
            <el-row v-if="personData&&personData.id" style="display: flex;padding: 5px 10px;background-color: #ecf5ff">
              <div style="margin-right: 25px;">
                <span>姓名:</span>
                <span style="color: #e6a23c;margin-left: 5px;"> {{personData.name}} </span>
              </div>
              <div style="margin-right: 25px;">
                <span>唯一编码:</span>
                <span style="color: #e6a23c;margin-left: 5px;">{{personData.uniqueCode}}</span>
              </div>
              <div style="margin-right: 25px;">
                <span>性别:</span>
                <span style="color: #e6a23c;margin-left: 5px;" v-if="personData.gender == 0">男</span>
                <span style="color: #e6a23c;margin-left: 5px;" v-if="personData.gender == 1">女</span>
              </div>
              <div style="margin-right: 25px;">
                <span>出生日期:</span>
                <span style="color: #e6a23c;margin-left: 5px;">{{personData.birthDay}}</span>
              </div>
              <div style="margin-right: 25px;">
                <span>联系方式:</span>
                <span style="color: #e6a23c;margin-left: 5px;">{{personData.telPhone}}</span>
              </div>

            </el-row>
            <el-row style="background-color: #ecf5ff;padding: 5px 10px;margin-top: 5px;">
              <el-col :span="8">
                <el-form-item label="挂号类型">
                  <el-select v-model="feeType" @change="feeTypeChange">
                    <el-option value="1" label="挂号"></el-option>
                    <el-option value="2" label="退费"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查类别">
                  <el-select v-model="registerForm.checkType" @change="checkTypeChange">
                    <el-option v-for="item in checkTypeOptions" :value="item.id" :label="item.name + ' ￥' + item.price"
                      :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="费别">
                  <el-select v-model="payType">
                    <el-option value="1" label="自费"></el-option>
                    <el-option value="2" label="医保"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="margin-bottom: 15px;">
            <el-divider content-position="left">代收费项目</el-divider>
            <el-table class="miui-table" :data="checkTypeList" border style="margin-bottom: 15px;">
              <el-table-column prop="name" header-align="center" align="center" label="检查项目"></el-table-column>
              <el-table-column prop="price" header-align="center" align="center" label="检查金额"></el-table-column>
            </el-table>

            <el-form label-width="80px" style="margin-bottom: 15px;">
              <el-row v-if="cancelDeal" style="background-color: #ecf5ff;padding: 5px 10px;">

                <el-col :span="4">
                  <el-form-item label="已缴金额">{{registerForm.price}}

                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="应退金额">
                    <el-input v-model="paidPrice" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="退费金额">
                    <el-input v-model="payValue" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4"></el-col>
              </el-row>
              <el-row v-if="!cancelDeal" style="background-color: #ecf5ff;padding: 5px 10px;">
                <el-col :span="4">
                  <el-form-item label="应缴金额">
                    <el-input v-model="paidPrice" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="缴费金额">
                    <el-input v-model="payValue" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4"></el-col>
              </el-row>
            </el-form>
            <payment-form :paymentDataList="paymentDataList" :paidPrice="paidPrice" @refreshFormData="getPaymentValue"
              :show="true"></payment-form>
          </div>
          <div class="ygsg-fixed-box" :class="isCollapse?'width1':'width2'">
            <el-button v-if="!cancelDeal" type="primary" @click="paymentHandle">缴 费</el-button>
            <el-button v-if="cancelDeal" type="primary" @click="cancelHandle">退 费</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="退号" name="second">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-row>
              <el-form-item>
                <el-input v-model="searchForm.personName" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="getDataList()">查询</el-button>
                <el-button icon="el-icon-delete" @click="searchReset">清空</el-button>
              </el-form-item>
            </el-row>
          </el-form>

          <div class="avue-crud">
            <el-table :data="dataList" border v-loading="dataListLoading">
              <el-table-column prop="registerConfigName" header-align="center" align="center" label="挂号项目"></el-table-column>
              <el-table-column prop="price" header-align="center" align="center" label="挂号费用"></el-table-column>
              <el-table-column prop="personName" header-align="center" align="center" label="姓名"></el-table-column>
              <el-table-column prop="cardNum" header-align="center" align="center" label="卡号"></el-table-column>
              <el-table-column prop="telPhone" header-align="center" align="center" label="电话号码"></el-table-column>
              <el-table-column prop="status" header-align="center" align="center" label="当前状态">
                <template slot-scope="scope">
                  {{getRegisterStatusType(scope.row.status)}}
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" icon="el-icon-edit" @click="cancelDetail(scope.row.id)">退费</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!--  弹窗, 选择客户  -->
      <search-person v-if="personSearchVisible" ref="personSearch" @refreshForm="updateForm"></search-person>
      <!-- 新增人员 -->
      <person-add v-if="personAddVisible" ref="personAddForm" @refreshForm="updateForm"></person-add>
    </basic-container>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'

  import SearchPerson from '@/components/business/person-search'
  import PaymentForm from '@/components/business/Payment'
  import PersonAdd from '@/views/pvm/person/form' //  新增会员

  import { getSaleDetail, paymentConduct } from '@/api/eims/cashier/payment'
  import { registerCenterForReturnPage, saveRegisterCenter, getRegister, cancelRegisterCenter } from '@/api/eims/cashier/register'
  import { getRegisterConfigList } from '@/api/eims/register-config'
  import { getPersonByCardNo } from "@/api/pvm/person";
  import { getCustomerByCardNo } from '@/api/eims/customer'

  export default {
    props: ['saleDataList'],
    data() {
      return {
        visible: false,
        activeName: 'first',
        personData: {},
        feeType: '1',
        payType: '1',
        checkTypeOptions: [],
        registerTypeData: [],
        registerForm: {
          checkType: ''
        },
        checkTypeList: [],
        visibleData: {
          money: false,
          integral: true,
          bankCard: true,
          storeCard: true,
          coupon: true
        },
        paymentDataList: [
          { method: '1', name: '现金', button: false, cost: '' },
          { method: '2', name: '积分', button: true, cost: '' },
          { method: '3', name: '储值卡', button: true, cost: '' },
          { method: '4', name: '银行卡', button: true, cost: '' },
          { method: '5', name: '代金券', button: true, cost: '' },
        ],
        cancelDeal: false,
        paidPrice: '',
        payValue: '',
        personSearchVisible: false,
        personAddVisible: false,
        searchForm: {
          key: '',
          personName: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0
      }
    },
    components: {
      SearchPerson,
      PaymentForm,
      PersonAdd
    },
    created() {
      remote('register_type').then(result => {
        this.registerTypeData = result.data.data
      })
      this.getCheckTypeList()
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      // 打开弹窗，初始化数据
      init() {
        this.visible = true
      },
      //  获取缴费数据
      getPaymentValue(data) {
        this.payValue = data
      },

      //  表单提交，缴费
      paymentHandle() {
        if (!this.personData.id) {
          this.$message.warning('请选择患者')
          return false
        }
        if (!this.registerForm.checkType) {
          this.$message.warning('请选择检查类型')
          return false
        }
        let list = []
        this.paymentDataList.forEach(item => {
          if (item.cost) {
            list.push({
              method: item.method,
              totalPrice: item.cost
            })
          }
        })
        this.payInfo = list
        let payInfoDTO = {
          registerConfigId: this.registerForm.checkType,
          cardNum: this.registerForm.cardNum,
          payType: this.payType,
          personId: this.personData.id,
          detailList: this.payInfo
        }
        if (this.payValue == this.paidPrice) {
          saveRegisterCenter(payInfoDTO).then(result => {
            if (result.data.code == 0) {
              this.$message.success('挂号成功')
              this.visible = false
              this.getDataList()
            }
          })
        } else {
          this.$message.warning('请核对缴费金额')
        }
      },
      //  读取客户卡号
      getPersonByCardNum() {
        getCustomerByCardNo(this.registerForm.cardNum).then(result => {
          console.log(result)
          // this.personData = result.data.data
        })
      },
      //  查询客户
      searchPerson() {
        this.personSearchVisible = true
        this.$nextTick(() => {
          this.$refs.personSearch.init()
        })
      },
      // 获取客户信息
      updateForm(data) {
        this.personData = data
        this.registerForm.cardNum = data.uniqueCode

      },
      //  选择挂号类型
      feeTypeChange(val) {
        this.registerForm.checkType = ''
        this.checkTypeOptions = []
        this.checkTypeList = []
        this.getCheckTypeList()
      },
      //  获取检查类型列表
      getCheckTypeList() {
        if (this.feeType == '1') {
          this.cancelDeal = false
        } else if (this.feeType == '2') {
          this.cancelDeal = true
        }
        getRegisterConfigList({
          feeType: this.feeType
        }).then(result => {
          let resultData = result.data.data;
          let list = []
          resultData.forEach(item => {
            if (item.type == '1') {
              list.push(item)
            }
          })
          this.checkTypeOptions = list
        })
      },
      //  选择检查类型
      checkTypeChange(val) {
        let list = []
        this.checkTypeOptions.forEach(item => {
          if (item.id == val) {
            this.paidPrice = item.price
            //this.paymentData.money = item.price
            list.push(item)
          }
        })
        this.checkTypeList = list
      },
      clearAllInput() {
        for (let key in this.paymentData) {
          this.paymentData[key] = ''
        }
      },
      getPersonByCardNum() {
        getPersonByCardNo(this.registerForm.cardNum).then(result => {
          this.personData = result.data.data;
        })
      },
      personAdd() {
        this.personAddVisible = true
        this.$nextTick(() => {
          this.$refs.personAddForm.init()
        })
      },
      cancelDetail(id) {
        this.activeName = 'first'
        getRegister(id).then(response => {
          this.registerForm = response.data.data
          this.personData.id = this.registerForm.personId
          this.personData.name = this.registerForm.personName
          this.personData.gender = this.registerForm.gender
          this.personData.telPhone = this.registerForm.telPhone
          this.personData.uniqueCode = this.registerForm.uniqueCode
          this.personData.birthDay = this.registerForm.birthDay
        })
        this.feeType = '2'
        this.getCheckTypeList()
        this.cancelDeal = true
      },
      cancelHandle() {
        let list = []
        if (!this.personData.id) {
          this.$message.warning('请选择患者')
          return false
        }
        if (!this.registerForm.checkType) {
          this.$message.warning('请选择检查类型')
          return false
        }

        this.paymentDataList.forEach(item => {
          if (item.cost) {
            list.push({
              method: item.method,
              totalPrice: item.cost
            })
          }
        })

        this.registerForm.registerConfigId = this.registerForm.checkType
        this.registerForm.detailList = list
        if (this.payValue == this.paidPrice) {
          cancelRegisterCenter(this.registerForm).then(result => {
            if (result.data.code == 0) {
              this.$message.success('退费成功')
              this.visible = false
              this.getDataList()
            }
          })
        } else {
          this.$message.warning('请核对退费金额')
        }
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.searchForm.deptId = this.userInfo.lessDeptId
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.searchForm)
        registerCenterForReturnPage(Object.assign(params1, params2)).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        this.searchForm = {};
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      getRegisterStatusType: function(value) {
        let obj = {};
        obj = this.registerTypeData.find((item) => {
          return item.value == value;
        });
        if (obj) {
          return obj.label;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  table tr td {
    border: solid 1px red;
    padding: 3px 8px;
  }

  .ygsg-fixed-box {
    position: fixed;
    bottom: 0;
    height: 45px;
    background-color: #fff;
    z-index: 99;
    text-align: right;
    padding-top: 5px;
    padding-right: 15px;
    border-top: solid 1px #e7e7e7;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  // 缩小菜单
  .ygsg-fixed-box.width1 {
    left: 70px;
    width: calc(100% - 80px);
  }

  // 打开菜单
  .ygsg-fixed-box.width2 {
    left: 250px;
    width: calc(100% - 260px);
  }

  // 隐藏菜单
  @media screen and (max-width: 992px) {
    .ygsg-fixed-box.width1 {
      left: 0;
      width: 100%;
    }

    .ygsg-fixed-box.width2 {
      left: 0;
      width: 100%;
    }
  }
</style>
